<!-- eslint-disable vue/max-attributes-per-line -->
<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <!-- 搜索框 -->
    <div class="secer">
      <el-form ref="serecForm" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="车辆类型:" style="marginLeft: 20px;">
          <el-select
            v-model="formInline.truckTypeName"
            placeholder="请选择"
            style="width: 340px"
          >
            <el-option v-for="item in truckType" :key="item.id" :label="item.name" :value="item.id"></el-option>
            <!-- 下拉框区域 -->
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码:" style="marginLeft: 50px;">
          <el-input
            v-model="formInline.licensePlate"
            placeholder="请输入车牌号码"
            style="width: 340px"
          ></el-input>
        </el-form-item>
        <el-form-item style="marginLeft: 40px;">
          <el-button type="warning" style="width: 90px" @click="onSubmit">搜索</el-button>
          <el-button style="width: 90px" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 导航栏 -->
    <TabChange
      style="height: 48px;"
      :default-active-index="0"
      :setting-list="settingList"
      @tabChange="tabChange"
    ></TabChange>

    <!-- 卡片内容 -->
    <el-card>
      <el-button type="warning" style="padding: 8px;" @click="newVehicle">新增车辆</el-button>

      <el-table style="margin-top: 20px;" :data="getList">
        <el-table-column width="60px" label="序号" type="index"> </el-table-column>
        <el-table-column width="136px" prop="licensePlate" label="车牌号码"> </el-table-column>
        <el-table-column width="131px" prop="truckTypeName" label="车辆类型"> </el-table-column>
        <el-table-column width="131px" prop="driverNum" label="司机数量"> </el-table-column>
        <el-table-column width="131px" prop="workStatus" label="车辆状态" class="workStatus">

          <template slot-scope="scope">
            <el-badge is-dot :type="workStatus[scope.row.workStatus] === '可用' ? 'success' : 'danger'"> </el-badge>
            <!-- <el-button class="workStatus" circle></el-button> -->
            {{ workStatus[scope.row.workStatus] }}
          </template>
        </el-table-column>
        <el-table-column width="197px" prop="deviceGpsId" label="GPS设备ID"> </el-table-column>
        <el-table-column width="197px" prop="allowableLoad" label="实载重量(T)"> </el-table-column>
        <el-table-column width="197px" prop="allowableVolume" label="实载体积(方)"> </el-table-column>
        <el-table-column width="220px" label="操作" style="textAlign: center">
          <template #default="{row}">
            <el-link
              type="primary"
              :underline="false"
              @click="$router.push(`vehicle-detail?id=${row.id}`)"
            >查看详情</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link
              type="primary"
              :underline="false"
              @click="start(row.id)"
            >启用</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link
              type="primary"
              :underline="false"
              @click="deploy(row.id)"
            >配置司机</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div v-show="getList && getList.length > 0" class="pagination">
        <div class="pages">
          <el-pagination
            :current-page="Number(params.page)"
            :total="Number(total)"
            :page-size="Number(params.pageSize)"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

    </el-card>
    <!-- 新增车辆弹框 -->
    <el-dialog title="新增车辆" :visible.sync="dialogFormVisible" width="600px" @close="handleClose">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">

        <el-form-item label="车辆类型:" prop="truckTypeId">
          <el-select
            v-model="ruleForm.truckTypeId"
            placeholder="请选择"
            style="width: 420px;"
          >
            <el-option v-for="item in truckType" :key="item.id" :label="item.name" :value="item.id"></el-option>
            <!-- 下拉框区域 -->
          </el-select>
        </el-form-item>

        <el-form-item label="车辆号码" prop="licensePlate">
          <el-input v-model="ruleForm.licensePlate" style="width: 420px;" placeholder="请输入车牌号码"></el-input>
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model="ruleForm.deviceGpsId" style="width: 420px;" placeholder="请输入GPS设备ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="subime()">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 配置司机弹框 -->
    <el-dialog title="配置司机" :visible.sync="deployDialog" width="640px" @close="deployClose">
      <div class="header">
        <div class="num">
          <label>车牌号：</label>
          <span>{{ deployList.licensePlate }}</span>
        </div>
        <div class="name">
          <label>车型：</label>
          <span>{{ deployList.truckTypeName }}</span>
        </div>
        <div class="carType">
          <label>车辆状态：</label>
          <span
            :class="{
              use: deployList.status === 1,
              noUse: deployList.status === 0
            }"
          >{{ deployList.status===1?'可用':'停用' }}</span>
        </div>
        <div class="agency">
          <label>实载重量：</label>
          <span>{{ deployList.allowableLoad }}</span>
        </div>
        <div class="workTime">
          <label>实载体积：</label>
          <span>{{ deployList.allowableVolume }}</span>
        </div>
      </div>

      <div class="serchBox">
        <label>配置司机：</label>
        <el-select
          suffix-icon="el-icon-search"
          placeholder="请输入司机名称"
          filterable
          multiple
          :value="selecteds"
          reserve-keyword
          @change="handleChange"
        >
          <el-option
            v-for="item in cabList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="cabList"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
      >
        <div
          v-show="!loading"
          slot="empty"
        >
          <img
            src="@/icons/pic-kong.png"
            alt="img"
            style="margin-top: 20px"
          />
          <p style="margin-top: -20px; padding-bottom: 0px">这里空空如也</p>
        </div>
        <el-table-column
          type="index"
          label="序号"
          width="200"
        />

        <el-table-column
          align="left"
          label="司机名称"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          align="left"
          label="操作"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="handleVehicleDetail(scope.row.userId)"
            >查看</el-link>
            <el-divider direction="vertical" />
            <el-link
              type="danger"
              :underline="false"
              @click="deleteDriver(scope.row.userId, scope.row.name)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="subime()">确 定</el-button>
        <el-button @click="deployClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TabChange from '@/components/TabChange'
import { getVehiclePageAPI, truckTypeAPI, getVehicleAPI, truckAddAPI, startAPI, bindingAPI, truckDetailsAPI } from '@/api/vehicle'

export default {
  name: 'Vehicle',
  components: {
    TabChange
  },
  data() {
    return {
      loading: false,
      selecteds: [],
      // 新增表单校验
      ruleForm: {
        truckTypeId: null, // 车辆类型id
        licensePlate: '', // 车牌号码
        deviceGpsId: '' // GPS设备ID
      },
      // 兜底校验
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'change' }
        ],
        licensePlate: [
          { required: true, message: '车辆号码不能为空', trigger: 'change' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'change' }
        ]
      },
      // 映射状态
      workStatus: {
        0: '停用',
        1: '可用'
      },
      // 搜索框
      formInline: {
        truckTypeName: '',
        licensePlate: ''
      },
      // 导航栏
      settingList: [
        {
          value: 0,
          label: '全部',
          num: 0
        },
        {
          value: 1,
          label: '可用',
          num: 0
        },
        {
          value: 2,
          label: '停用',
          num: 0
        }
      ],
      // 页码
      params: {
        page: 1,
        pageSize: 10, // 页码
        workStatus: null, // 状态
        licensePlate: '', // 车牌号码
        truckTypeId: '' // 车辆类型ID
      },
      total: null, // 总页码
      getList: [], // 总数据渲染
      truckType: [], // 车辆类型
      dialogFormVisible: false, // 弹框
      deployDialog: false, // 车辆弹框
      deployList: [],
      cabList: []
    }
  },
  created() {
    this.getVehicleList() // 全部数据
    this.truckTypeList() // 车辆类型下拉框
    this.tabVehicle() // tab状态栏显示
  },
  methods: {
    // 删除选中司机
    deleteDriver (id, name) {
      // this.dataList = this.dataList.filter((item) => item.userId !== id)
      // this.selecteds = this.selecteds.filter((item) => item !== name)
    },
    // 跳转到司机详情
    handleVehicleDetail (id) {
      this.$router.push({
        path: '/driver-detail',
        query: { id: id, formUrlName: '司机管理' }
      })
    },
    // 改变时触发
    handleChange (value) {
      if (value.length > 2) {
        return this.$message.error('车辆最多只能绑定2名司机，请先删除绑定司机！')
      }
      this.selecteds = value
    },

    async  deploy(id) {
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('p', null, [
          h('p', null, '配置司机需满足以下条件: '),
          h('span', null, '1.车辆信息已完善'),
          h('span', { style: 'marginLeft:50px;' }, '2.车辆无未完成运输任务')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        // 调用接口 提示信息
        this.deployOpen()
        this.deployOpen()
        const res = await truckDetailsAPI(id)

        this.deployList = res.data
        console.log(this.deployList)

        const data = await bindingAPI(id)
        console.log('111', data)
        this.cabList = data.data
      }).catch(() => {
        this.$message.info('已取消启用')
      })
    },
    // 启用
    async start(id) {
      const h = this.$createElement
      this.$msgbox({
        title: '车辆启动',
        message: h('p', null, [
          h('p', null, '确定要启用吗?车辆启动需满足以下条件: '),
          h('span', null, '①车辆信息已完善'),
          h('span', { style: 'marginLeft:50px;' }, '②绑定司机>=2,且有排班')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        // 调用接口 提示信息
        const res = await startAPI(id)
        if (res.code === 1) {
          this.$message.error(res.msg)
        } else {
          this.$message(res.msg)
        }
      }).catch(() => {
        this.$message.info('已取消启用')
      })
    },
    // 打开车辆弹框
    deployOpen() {
      this.deployDialog = true
    },
    // 关闭车辆弹框
    deployClose() {
      this.deployDialog = false
    },
    // tab栏状态显示
    async tabVehicle() {
      const { data } = await getVehicleAPI()
      // console.log(data)
      this.settingList[0].num = +data[0] + +data[1]
      this.settingList[1].num = +data[1]
      this.settingList[2].num = +data[0]
    },
    // 弹框确定按钮
    async subime() {
      // await truckAddAPI(this.ruleForm)
      try {
        await this.$refs.ruleForm.validate() // 统一校验
        const { truckTypeId, licensePlate, deviceGpsId } = this.ruleForm
        await truckAddAPI({ truckTypeId, licensePlate, deviceGpsId }) // 调用添加接口
        this.getVehicleList() // 重新刷新页面
        this.handleClose() // 关闭弹窗
        this.$message.success('新增车辆成功')
      } catch {
        console.log('表单校验失败')
      }
    },
    // 新增车辆
    newVehicle() {
      this.handleDispatch() // 打开弹框
    },
    // 获取车辆类型下拉框
    async truckTypeList() {
      const { data } = await truckTypeAPI()
      // console.log('车辆类型下拉框', data)
      this.truckType = data
    },
    // 获取全部数据
    async  getVehicleList() {
      const { data } = await getVehiclePageAPI(this.params)
      // console.log('数组', data)
      this.getList = data.items
      this.total = data.counts
    },
    // 搜索按钮
    onSubmit() {
      this.params.truckTypeId = this.formInline.truckTypeName
      this.params.licensePlate = this.formInline.licensePlate
      this.getVehicleList()
    },
    // 重置按钮
    reset() {
      this.params = {
        page: 1,
        pageSize: 10, // 页码
        workStatus: null, // 状态
        licensePlate: '', // 车牌号码
        truckTypeId: '' // 车辆类型ID
      }
      this.getVehicleList()
    },
    // Tab栏状态变更
    tabChange(activeIndex) {
      if (activeIndex === 0) {
        this.params.workStatus = null // 全部状态
      } else if (activeIndex === 1) {
        this.params.workStatus = 1 // 可用状态
      } else if (activeIndex === 2) {
        this.params.workStatus = 0 // 停用状态
      }
      // 重新渲染
      this.getVehicleList()
    },
    // 打开弹窗
    async handleDispatch() {
      this.dialogFormVisible = true
      const { data } = await truckTypeAPI()
      // console.log('车辆类型下拉框', data)
      this.truckType = data
    },
    // 关闭弹窗
    handleClose() {
      this.dialogFormVisible = false
      this.$refs.ruleForm.resetFields()
    },

    // 进入某一页
    handleCurrentChange(val) {
      this.params.page = val
      this.getVehicleList()
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.params.pageSize = val
      if (this.params.page === 1) {
        this.getVehicleList(this.params)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// .startconfirm .el-message-box{
//   width: 480px;
// }
// .workStatus{
//     width: 6px;
//     height: 6px;
//     background: #1dc779;
// }
.dialog-footer{
display: flex;
justify-content: center;
button{
  width: 90px;
  height: 40px
}
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
}
.alert {
  margin: 10px 0px;

}

.pagination {
  margin-top: 10px;
}

.vehicle ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }

  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }

  .warn-img {
    width: 40px;
  }

  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}

.startconfirm {
  width: 481px;
}

.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}

.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}

.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}

.confirm.el-message-box__title {
  font-size: 16px;
}

.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}

.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}

.secer {
  margin: 23px 20px 0px 20px;
  width: 1458px;
  height: 80px;
  background-color: #fff;
}

.demo-form-inline {
  padding: 20px 20px;
}
.el-card {
  margin: 23px 20px 0px 20px;
  width: 1458px;
  height: 745px;
}
::v-deep .small-padding{
  .cell{
    text-align:left!important
  }
}
.serchBox {
  .el-select {
    width: 300px;
  }
  text-align: left;
  margin-bottom: 20px;
}
.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 131px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  text-align: left;
  .el-input {
    width: 240px;
  }
  div {
    flex: 40%;
  }
  .num,
  .iphone {
    flex: 60%;
  }
  label {
    color: #20232a;
    font-size: 14px;
    font-weight: normal;
  }
  span {
    color: #818693;
    font-size: 14px;
  }
  .carType {
    flex: 60%;
    span {
      display: inline-block;
      text-align: center;
      line-height: 20px;
      width: 41px;
      height: 20px;
      border-radius: 13.5px;
      color: white;
      font-size: 12px;
    }
    .use {
      background: #37c608;
    }
    .noUse {
      background: #808694;
    }
  }
}
.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}
.selected-driver {
  margin-top: 18px;
}
::v-deep .el-table {
  overflow: initial;
  .el-table__body-wrapper {
    overflow: initial;
    .cell {
      overflow: initial;
    }
  }
}
</style>
